<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chapter01 1.5</title>
    <link rel="stylesheet" href="./css/login.css"/>
    <style>
        
    </style>
    <!-- Step 1: 引入vue -->
    <script src="./js/vue.global.js"></script>
</head>

<body>
    <div id="app" class="wrapper">
        <img class="wrapper__img" src="./images/user.png" alt="user">
        <div class="wrapper__input">
            <input v-model="userName" class="wrapper__input__content" type="text" placeholder="请输入用户名">
        </div>
        <div class="wrapper__input">
            <input v-model="password" class="wrapper__input__content" type="password" placeholder="输入密码">
        </div>
        <div class="wrapper__loginButton" v-on:click="Login">登陆</div>
        <div class="wrapper__register">
            <span>立即注册</span>
            <div class="seperator"></div>
            <span>忘记密码</span>
        </div>
    </div>
    <script>
        // Step 2:
        // 定义根组件
        const root_component = {
            data() {
                return {
                    userName: '',
                    password: ''
                }
            },
            methods: {
                // onclick事件
                Login() {
                    console.log(this.userName, this.password)
                    if (this.userName.length > 0 && this.password.length > 0) {
                        alert(`用户名: ${this.userName} 密码: ${this.password}`)
                    } else {
                        alert("请输入用户名密码")
                    }
                }
            }
        }
        // 创建App
        const app = Vue.createApp(root_component)
        // 挂载
        const vm = app.mount("#app")
        console.log(vm)        
    </script>
</body>

</html>